<template>
  <div class="letContent3Ehart">
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import {let3Data} from '@/utils/data';
import Chart from './chart.vue'
export default {
  data () {
    return {
      drawTiming: null,
      // 定义颜色
      colorList: {
        linearGtoA: {
          colorA:'#fd0000',
          areaColorA: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(253,0,0,.4)"
              },
              {
                offset: 1,
                color: "rgba(253,0,0,0)"
              }
            ]
          },
          colorB:'#d65541',
          areaColorB: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(214,85,65,.4)"
              },
              {
                offset: 1,
                color: "rgba(214,85,65,0)"
              }
            ]
          },
        },
        linearGtoB: {
          colorA:'#43dfa2',
          areaColorA: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(35,184,210,.4)"
              },
              {
                offset: 1,
                color: "rgba(35,184,210,0)"
              }
            ]
          },
          colorB:'#24e418',
          areaColorB: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(36,228,24,.4)"
              },
              {
                offset: 1,
                color: "rgba(36,228,24,0)"
              }
            ]
          }
        }
      },
      cdata: {
        weekCategory:[],
        series:[]
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.getData();
  },
  beforeDestroy () {

  },
  methods: {
    getData () {
      let3Data.forEach(element => {
        element.data.forEach(element1 => {
          this.cdata.weekCategory.push(element1.name);
        })
        this.cdata.series.push({
            name: element.name,
            type: "line",
            symbol: "emptyCircle",
            symbolSize: 8,
            itemStyle: {
                color: this.colorList.linearGtoB.colorA,
                width: 3
            },
            areaStyle: {
              normal: {
                color: this.colorList.linearGtoB.areaColorA
              }
            },
            data:element.data
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.letContent3Ehart{
  width: 100%;
  height: 100%;
  >div{
    width: 100%;
    height: 100%;
  }
}
</style>